<template>
  <div class="inventory-transfer">
    <!-- 操作栏 -->
    <div class="action-bar">
      <el-input
          v-model="searchKey"
          placeholder="搜索调拨单号/商品..."
          suffix-icon="Search"
          style="width: 360px"
      />
      <el-button type="primary" icon="RefreshRight">新建调拨</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="filteredData" stripe>
      <el-table-column prop="transferNo" label="调拨单号" width="180" />
      <el-table-column prop="goodsName" label="商品名称" min-width="200" />
      <el-table-column prop="quantity" label="调拨数量" width="120" align="center" />
      <el-table-column prop="fromWarehouse" label="调出仓库" width="150" />
      <el-table-column prop="toWarehouse" label="调入仓库" width="150" />
      <el-table-column prop="transferDate" label="调拨日期" width="180" />
      <el-table-column label="状态" width="120" align="center">
        <template #default="{ row }">
          <el-tag :type="statusColor[row.status]">
            {{ statusText[row.status] }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 模拟数据生成
const generateData = () => {
  const warehouses = ['上海仓', '北京仓', '广州仓', '成都仓']
  return Array.from({ length: 50 }, (_, i) => ({
    transferNo: `TR-2023${String(i+1).padStart(4, '0')}`,
    goodsName: `商品${String.fromCharCode(65 + (i % 5))}`,
    quantity: Math.floor(Math.random() * 100) + 50,
    fromWarehouse: warehouses[i % 4],
    toWarehouse: warehouses[(i + 1) % 4],
    transferDate: `2023-0${Math.ceil((i%12)+1)}-${String(i%28+1).padStart(2,'0')}`,
    status: Math.floor(Math.random() * 3)
  }))
}

const tableData = ref(generateData())
const searchKey = ref('')

// 状态配置
const statusText = ['待处理', '运输中', '已完成']
const statusColor = ['warning', 'primary', 'success']

const filteredData = computed(() =>
    tableData.value.filter(item =>
        item.transferNo.includes(searchKey.value) ||
        item.goodsName.includes(searchKey.value)
    )
)
</script>

<style scoped>
.inventory-transfer {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);

  .action-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
</style>